.learn-page-container {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction:column;
  padding: 0 24px;
  overflow-y: scroll;

  .learn-header-container {
    display: flex;
    justify-content: space-between;
    padding: 24px 0;

    .ant-form {
      width: 100%;
      display: flex;

      .ant-form-item {
        margin-left: 15px;

        .ant-form-item-label {
          width: 80px;
          text-align: left;
        }

        .ant-select {
          width: 150px;
        }

        .ant-input {
          width: 180px;
        }
      }
    }
    
    .word-opear-option {
      display: flex;

      .ant-btn {
        margin-left: 15px;
      }
    }
  }

  .learn-list-container {
    flex: 1;

    .overflow-text {
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .learn-word-name {
      display: flex;
      align-items: center;

      .learn-word-type-white,
      .learn-word-type-red {
        width: 25px;
        height: 25px;
        margin: 0 15px;
        background-color: #1859e6;
        border: 2px solid #ccc;
      }

      .learn-word-type-white {
        color: #fff;
      }

      .learn-word-type-red {
        color: red;
      }
    }

    .ant-pagination {
      margin: 25px 15px;
      text-align: right;
    }
  }
}